<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#DDDDDD ;
  }
  .container {
    height: 100vh;
    width: 80%;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
     background-color: rgba(255, 255, 255, 1);
  }
  .vjs-default-skin{
    height: 80%;
    width: 80%;
  }
  .title{
    height: 10%;
    width: 80%;




  }
  .title h1{
    font-size: 30px;
    text-align: left; /* 使 h1 标题居左对齐 */
    margin-bottom: 20px

  }

</style>
  <title>RTMP 视频播放</title>
  <!-- 引入 Video.js 的 CSS 和 JS 文件 -->
  <link href="https://vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
  <!-- 引入 RTMP 插件 -->
  <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2.0.0/dist/videojs-flash.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">

<h1>RTMP 视频播放</h1>


</div>
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
  <source src="rtmp://example.com:1935/live/stream1" type="rtmp/flv">
  <p class="vjs-no-js">为了观看视频，请启用 JavaScript 并考虑升级到支持 HTML5 视频的浏览器。</p>
</video>
</div>
</tr>

<script>        // 初始化 Video.js 播放器
var player = videojs('my-video', {
  techOrder: ['flash'],
  sources: [{
    src: 'rtmp://example.com:1935/live/stream1',
    type: 'rtmp/flv'
  }]
});

// 可以在这里添加其他配置或事件监听
player.on('play', function() {
  console.log('视频开始播放');
});

player.on('pause', function() {
  console.log('视频暂停');
});
</script>
</body>
</html>
